<template>
    <div id="GoodsList">
         <ul>
            <li v-for="(item,key) in goodsList" :key="key" @click="show">
               <img :src="item.Cover" alt="显示失败">
               <span>{{item.Name | filtersming}}</span>
            </li>
         </ul>
    </div>
</template>

<script>
export default {
  props: {
    goodsList: {
      type: [Array]
    },
    loaderUl: {
      type: String
    }
  },
  methods: {
    show() {
      this.$router.push({ path: "/searchResult" });
    }
  }
};
</script>

<style lang="scss" scoped>
#GoodsList {
  width: 100%;
  height: 100%;
  ul {
    width: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    li {
      width: 33.3%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 10px;
      align-items: center;
      padding: 20px 5px;
      img {
        flex: 1;
        width: 70%;
        height: 100%;
      }
    }
  }
}
</style>
